<template>
  <div class="trace">
    <Left-menus active="1"></Left-menus>
    <div class="trace-main">
      <div class="header">
        <img src="@/assets/images/smile.png" alt />
        <div>
          <h1>欢迎使用布鲁克商城溯源服务！</h1>
          <p>轻松使用区块链为商品赋能，实现来可追、去可查，提升品牌价值，保障消费者权益。</p>
        </div>
      </div>
      <div>
        <div class="overview my-btn">
          <div class="overview-left">
            <h3 class="leftBorder">溯源服务总览</h3>
            <div class="overview-left_server">
              <div>
                <i class="el-icon-s-shop"></i>
                {{print.storeName}}
                <span class="quality">{{form.serviceName}}</span>
              </div>
              <span v-if="form.invalid == 1" class="status">
                <b class="circle"></b> 运行中
              </span>
              <span v-else @click="allin" style="color:#E13333;" class="status">
                <b class="circle" style="background-color: #E13333;"></b> 已到期
              </span>
            </div>
            <div class="overview-left_flex">
              <div>
                <span>商户ID</span>
                <p>{{form.uid}}</p>
              </div>
              <div>
                <span>企业信息</span>
                <p>{{form.companyName}}</p>
              </div>
              <div>
                <span>服务期限</span>
                <p>{{form.openTime*1000 | dateforday}} - {{form.expTime*1000 | dateforday}}</p>
              </div>
            </div>
            <div class="overview-left_btn">
              <el-button @click="$router.push('/traceability/roler')">升级配置</el-button>
            </div>
          </div>
          <div class="overview-right">
            <h3 class="leftBorder">账户配额</h3>
            <div class="overview-left_flex">
              <div>
                <span>商品种类</span>
                <p>{{form.consumeCategory}} / {{form.totalCategory}}</p>
              </div>
              <div>
                <span>溯源码</span>
                <p>{{form.consumeCode}} / {{form.totalCode}}</p>
              </div>
              <div>
                <span>存储空间</span>
                <p>{{form.consumeCapacity}} / {{form.totalCapacity}}</p>
              </div>
            </div>
            <div class="overview-left_btn">
              <el-button @click="$router.push('/traceability/roler')">升级配置</el-button>
            </div>
          </div>
        </div>
        <div class="configu">
          <h3 class="leftBorder">溯源配置</h3>
          <div class="configu-main my-btn">
            <div class="configu-main_san">
              <img src="@/assets/images/mange1.png" alt />
              <p>1.溯源商品管理</p>
              <el-button @click="$router.push('/traceability/traceab')">添加溯源商品</el-button>
            </div>
            <div class="configu-main_san">
              <img src="@/assets/images/mange2.png" alt />
              <p>2.溯源配置管理</p>
              <el-button @click="$router.push('/traceability/traceab')">配置溯源环节</el-button>
            </div>
            <div class="configu-main_san">
              <img src="@/assets/images/mange3.png" alt />
              <p>3.溯源码管理</p>
              <div>
                <el-button @click="$router.push('/traceability/traceab')">生成溯源码</el-button>
                <el-button @click="$router.push('/traceability/traceab')">导出溯源码</el-button>
              </div>
            </div>
            <div class="configu-main_san">
              <img src="@/assets/images/mange4.png" alt />
              <p>4.溯源展示管理</p>
              <el-button @click="$router.push('/traceability/traceab')">配置溯源展示</el-button>
            </div>
            <div class="configu-main_san">
              <img src="@/assets/images/mange5.png" alt />
              <p>5.统计大数据</p>
              <el-button @click="$router.push('/traceability/statistical')">溯源统计</el-button>
            </div>
            <div class="configu-main_san" style="visibility: hidden;"></div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      title="选择支付方式"
      :visible.sync="dialogVisible"
      width="30%"
      class="coll-dialog"
      top="25vh"
    >
      <span class="coll-dialog_way">
        <el-radio v-model="radio" label="1">
          <span class="coll-dialog_pay">
            账户余额
            <b>支付 1,000 CAT</b>
          </span>
        </el-radio>
        <el-radio v-model="radio" label="2">支付宝</el-radio>
        <el-radio v-model="radio" label="3">微信</el-radio>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button type="text" @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="text"
          style="color:rgba(0, 186, 173, 1);"
          @click="dialogVisible = false;dialogVisible1 = true"
        >购 买</el-button>
      </span>
    </el-dialog>
    <el-dialog :visible.sync="dialogVisible1" width="15%" class="coll-dialog1" top="35vh">
      <span class="coll-dialog1_way">
        <p>确认支付开通</p>
        <b>1,000 CAT</b>
        <el-input placeholder="请输入支付密码" v-model="password" show-password></el-input>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button
          type="text"
          style="color:rgba(0, 186, 173, 1);"
          @click="dialogVisible1 = false"
        >取 消</el-button>
        <el-button
          type="text"
          style="color:rgba(0, 186, 173, 1);"
          @click="dialogVisible1 = false,dialogVisible2 = true,tracer='支付成功！'"
        >购 买</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :visible.sync="dialogVisible2"
      width="30%"
      class="coll-dialog2"
      top="20vh"
      :lock-scroll="true"
    >
      <div class="congratulation">
        <i class="el-icon-success"></i>
        <p>{{tracer}}</p>
        <el-button type="primary" @click="dialogVisible2 = false">返回商品溯源后台</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogVisible3" width="20%" class="coll-dialog1" top="25vh">
      <span class="coll-dialog1_way">
        <p>续约溯源服务</p>
        <b style="margin:20px 0">1,000 CAT</b>
        <div class="expired">
          <p>品牌量：1 种（动态扩容，10 CAT/种）</p>
          <p>商品量：10 种（动态扩容，1 CAT/种）</p>
          <p>溯源码：1,000 个（动态扩容，0.1 CAT/个）</p>
          <p>存储量：100 G</p>
          <p>管理员：1 个（动态扩容，100 CAT/个）</p>
        </div>
        <el-input placeholder="请输入支付密码" v-model="password" show-password></el-input>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button
          type="text"
          style="color:rgba(0, 186, 173, 1);"
          @click="dialogVisible3 = false"
        >取 消</el-button>
        <el-button
          type="text"
          style="color:rgba(0, 186, 173, 1);"
          @click="dialogVisible3 = false,dialogVisible2 = true,tracer='续约成功！'"
        >购 买</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import LeftMenus from "@/views/components/TraceaLeftmenus";
import { mapState } from "vuex";
export default {
  props: {
    form: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      dialogVisible: false, // 支付方式
      dialogVisible1: false, // 支付密码
      dialogVisible2: false, // 返回后台
      dialogVisible3: false, // 续约
      deploy: {
        brand: "",
        shop: "",
        code: "",
        storage: "",
        controller: "",
      }, // 所有升级配置
      show: true, // 认证状态
      activeName: "first",
      activeName1: "first",
      radio: "1",
      password: null,
      tracer: "支付成功!",
    };
  },
  methods: {
    allin() {
      this.$emit("func", true);
    },
  },
  components: {
    LeftMenus,
  },
  computed: {
    ...mapState({
      print: (state) => state.print.all,
    }),
  },
};
</script>

<style lang="scss" scoped>
.trace {
  display: flex;
  justify-content: center;
  .trace-main {
    width: 1000px;
    .header {
      padding: 10px 0 10px 25px;
      background-color: rgba(91, 198, 187, 1);
      color: #fff;
      line-height: 30px;
      display: flex;
      align-items: center;
      img {
        margin-right: 25px;
      }
    }
    .leftBorder {
      padding-left: 15px;
      border-left: 4px solid rgba(91, 198, 187, 1);
    }
    .overview {
      display: flex;
      justify-content: space-between;
      margin-top: 15px;
      .overview-left {
        background: url("../../../assets/images/pic_back1.png") no-repeat;
        background-size: 100% 100%;
        padding: 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        flex: 0.49;
        box-sizing: border-box;
        .overview-left_server {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin: 10px 0;
          font-size: 16px;
          .quality {
            background: rgba(255, 247, 231, 1);
            color: #ffb31a;
            border-radius: 5px;
            padding: 5px 10px;
          }
          .status {
            color: #00baad;
            display: inline-block;
            font-size: 12px;
            display: flex;
            align-items: center;
            width: 47px;
            justify-content: space-between;
            cursor: pointer;
            b {
              background-color: #00baad;
              display: inline-block;
              width: 6px;
              height: 6px;
              border-radius: 50%;
            }
          }
        }
      }
      .overview-left_flex {
        display: flex;
        justify-content: space-between;
        margin: 10px 0;
        span {
          text-align: center;
          display: block;
          color: #a3a5a9;
        }
        p {
          text-align: center;
          max-width: 185px;
        }
      }
      .overview-left_btn {
        display: flex;
        justify-content: center;
        /deep/ .el-button {
          background-color: #ffb31a;
          border-color: #ffb31a;
          padding: 10px 30px;
          color: #fff;
          width: 120px;
        }
        /deep/ .el-button:active {
          border-color: #e9a51c;
          background-color: #e9a51c;
          outline: 0;
        }
      }
      .overview-right {
        background: url("../../../assets/images/pic_back2.png") no-repeat;
        background-size: 100% 100%;
        padding: 20px;
        flex: 0.49;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        box-sizing: border-box;
        span {
          color: #a3a5a9;
        }
        p {
          white-space: nowrap;
          margin-top: 25px;
        }
      }
    }
    .configu {
      margin: 25px 0;
      .configu-main {
        margin-top: 15px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        /deep/ .el-button {
          padding: 10px 20px;
          width: auto;
        }
        .configu-main_san {
          width: 322px;
          height: 200px;
          padding: 20px 0;
          box-sizing: border-box;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          align-items: center;
          background-color: #fff;
          margin-bottom: 15px;
        }
      }
    }
  }
  .coll-dialog {
    /deep/ .el-button--text {
      color: #101010;
    }
    /deep/ .el-radio__input.is-checked + .el-radio__label {
      color: #101010;
    }
    .coll-dialog_way {
      display: flex;
      flex-direction: column;
      min-height: 100px;
      justify-content: space-around;
    }
    .coll-dialog_pay {
      b {
        width: 80%;
        display: inline-block;
        text-align: right;
      }
    }
  }
  .coll-dialog1 {
    /deep/ .el-dialog {
      border-radius: 15px;
      background-color: rgba(255, 255, 255, 0.8);
    }
    /deep/ .el-dialog__header {
      padding: 0;
      .el-icon-close:before {
        content: "";
      }
    }
    /deep/ .el-dialog__body {
      padding: 20px;
    }
    /deep/ .el-dialog__footer {
      padding: 0;
      .dialog-footer {
        display: flex;
        justify-content: center;
        .el-button {
          flex: 0.5;
          border-top: 1px solid #bbb;
          border-radius: 0;
        }
        .el-button + .el-button {
          border-left: 1px solid #bbb;
          margin-left: 0;
        }
      }
    }
    .coll-dialog1_way {
      display: flex;
      min-height: 100px;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      /deep/ .el-input__inner {
        height: 30px;
        line-height: 30px;
      }
      b {
        font-size: 20px;
      }
    }
  }
  .congratulation {
    max-width: 1200px;
    min-height: 500px;
    margin: 15px auto 0;
    background-color: #fff;
    padding: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    i {
      font-size: 50px;
      color: rgba(0, 186, 173, 1);
      margin-top: -50px;
    }
    p {
      color: rgba(16, 16, 16, 1);
      font-size: 18px;
      margin: 25px 0;
    }
    /deep/ .el-button {
      border-radius: 5px;
      background-color: rgba(0, 186, 173, 1);
    }
  }
  .coll-dialog2 {
    color: #fff;
    p {
      color: #fff;
    }
    background-color: rgba(0, 0, 0, 0.5);
    /deep/ .el-dialog__header {
      display: none;
    }
    /deep/ .el-dialog__body {
      background-color: transparent;
    }
    /deep/ .el-dialog {
      background-color: transparent;
      box-shadow: none;
    }
    .congratulation {
      background-color: transparent;
    }
    /deep/ .el-button--primary {
      border-color: #00baad;
    }
  }
  .expired {
    p {
      margin: 10px 0;
      font-size: 12px;
    }
    & p:last-child {
      margin-bottom: 25px;
    }
  }
}
</style>